<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<body>

<div ng-include="headerInclude"></div>
<div ng-controller="Apiman.NewContractController" id="form-page" class="container-pf-nav-pf-vertical container-fluid apiman-new-contract apiman-entity-new page" data-field="page">
    <div class="row">
        <h2 class="title" apiman-i18n-key="new-contract">New Contract</h2>
    </div>
    <!-- Helpful hint -->
    <div class="row">
        <p class="col-md-6 apiman-label-faded" apiman-i18n-key="new-contract-help-text" class="apiman-label-faded">
            Creating a contract allows you to connect a Client App to an API using a particular plan offered by the API.
            Create a contract to enable your Client App to invoke the API successfully. This is not necessary for public
            APIs.</p>
    </div>
    <!-- HR -->
    <div class="row hr-row">
        <hr/>
    </div>

    <div id="new-contract-form" class="new-contract-form row">
        <div class="col-md-6">
            <div class="client" ng-class="{ selected : selectedClientVersion }">
                <div class="title"><i class="fa fa-gears fa-fw"></i> <span apiman-i18n-key="from-client">From Client App</span></div>
                <div class="body">
                    <p apiman-i18n-key="new-contract.client-description">
                        The Client App in the version that will be used as the source of the new API contract.
                    </p>
                    <div class="center-content" ng-show="clients.length > 0">
                        <ui-select ng-model="selectedClient"
                                   on-select="changedClient($item)"
                                   search-enabled="true">
                            <ui-select-match placeholder="Select a Client Application" apiman-i18n-key="select-client">
                                <span ng-bind="$select.selected.organizationName + ' / ' + $select.selected.name"></span>
                            </ui-select-match>
                            <ui-select-choices repeat="client in (clients | filter: $select.search) track by client.id">
                                <span ng-bind="client.organizationName + ' / ' + client.name"></span>
                            </ui-select-choices>
                        </ui-select>
                <span class="slash" apiman-i18n-skip="">&nbsp;</span>
                        <ui-select ng-model="selectedClientVersion"
                                   search-enabled="true">
                            <ui-select-match placeholder="Select a Version" apiman-i18n-key="select-client-version">
                                <span ng-bind="$select.selected"></span>
                            </ui-select-match>
                            <ui-select-choices repeat="version in (clientVersions | filter: $select.search) track by version">
                                <span ng-bind="version"></span>
                            </ui-select-choices>
                        </ui-select>
                    </div>

                    <div class="alert alert-warning" ng-show="clients.length > 0 && selectedClient && clientVersions.length == 0" style="margin-top: 10px">
                        <span class="pficon pficon-info"></span>
                 <span apiman-i18n-key="new-contract.no-client-versions">
                   There are no versions of the selected Client App that can be registered.  For example, if a
                   Client App is Retired you will not be able to create a contract for it.
                 </span>
                    </div>
                    <div class="alert alert-warning" ng-show="clients.length == 0">
                        <span class="pficon pficon-info"></span>
                 <span apiman-i18n-key="new-contract.no-clients-found">
                   No Client Apps found. You have to manage at least one Client App in order to create a contact.
                 </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="col-md-6">
            <div class="arrow to-plan-arrow" apiman-i18n-skip>&nbsp;</div>
        </div>

        <div class="clearfix"></div>

        <div class="col-md-6">
            <div class="plan" ng-class="{ selected : selectedPlan }">
                <div class="title"><i class="fa fa-bar-chart-o fa-fw"></i> <span apiman-i18n-key="using-plan">Using Plan</span></div>
                <div class="body">
                    <p ng-show="!plans" apiman-i18n-key="new-contract.choose-valid-api-msg">
                        You have to choose a valid API below before the available plans can be displayed. Either you
                        have not selected an API or the API has no available plans.
                    </p>
                    <p apiman-i18n-key="new-contract.plan-description" ng-show="plans" apiman-i18n-key="new-contract.choose-plan-msg">
                        Use the drop-down below to choose one of the plans made available by the selected API.
                    </p>
                    <div class="center-content" ng-show="plans">
                        <ui-select ng-model="selectedPlan"
                                   on-select="changedPlan($item)">
                            <ui-select-match placeholder="Select a Plan"
                                             apiman-i18n-key="select-plan">
                                <span ng-bind="$select.selected.planName"></span>
                            </ui-select-match>
                            <ui-select-choices repeat="plan in (plans | filter: $select.search) track by plan.planName">
                                <span ng-bind="plan.planName"></span>
                            </ui-select-choices>
                        </ui-select>
                    </div>
                </div>
            </div>
        </div>

        <div class="clearfix"></div>

        <div class="col-md-6">
            <div class="arrow to-api-arrow" apiman-i18n-skip>&nbsp;</div>
        </div>

        <div class="clearfix"></div>

        <div class="col-md-6">
            <div class="api" ng-class="{ selected : selectedApi }">
                <div class="title"><i class="fa fa-puzzle-piece fa-fw"></i> <span apiman-i18n-key="to-api">To API</span></div>
                <div class="body">
                    <p apiman-i18n-key="new-contract.api-description">
                        Select the target of this API contract. The target is the API the Client App will be consuming.
                    </p>
                    <div class="center-content">
                        <button ng-click="selectApi()" class="btn btn-default btn-api" ng-show="selectedApi">
                            <span>{{ selectedApi.organizationName }}</span>
                            <span apiman-i18n-skip> / </span>
                            <span class="emphasis">{{ selectedApi.name }}</span>
                            <span apiman-i18n-skip>&#8680;</span>
                            <span>{{ selectedApi.version }}</span>
                        </button>
                        <button id="api" ng-click="selectApi()" class="btn btn-default btn-api btn-primary" ng-show="!selectedApi">
                            <span apiman-i18n-key="select-api">Select an API</span>
                        </button>
                        <div class="clearfix"></div>
                    </div>
                    <div style="text-align: center;">
                        <span style="font-size: 10px;" ng-show="selectedApi" apiman-i18n-key="new-contract.click-to-change">(click to change)</span>
                    </div>
                </div>
            </div>
        </div>
    </div> <!-- /new-contract-form -->

    <div class="row hr-row">
        <hr/>
    </div>

    <div class="row">
        <button id="create-contract" ng-click="createContract()" apiman-action-btn="" ng-disabled="isDisabled()" class="btn btn-primary" data-field="createButton" apiman-i18n-key="create-contract" placeholder="Creating..." data-icon="fa-cog">Create Contract</button>
        <a id="cancel" href="{{ pluginName }}" class="btn btn-default btn-cancel" data-field="cancelButton" apiman-i18n-key="cancel">Cancel</a>
    </div>

    <div ng-include="'plugins/api-manager/html/modals/selectApiModal.html'"></div>

</div> <!-- /container-pf-nav-pf-vertical container-fluid -->
</body>
</html>
